<template>
  <div style="border: 2px solid green">子组件
    <h3>{{ value }}</h3>
    <h4>sync双向绑定 子组件aaa{{ aaa }}</h4>
    <h4>sync双向绑定 子组件bbb{{ bbb }}</h4>
    <h4>父组件里obj的值{{ obj }}</h4>
    <button @click="fn">点我改变父组件msg值</button>
    <button @click="updatedNum">点我改变a,b的值</button>
    <button @click="changeObj">改变父传子对象里的属性值</button>
  </div>
</template>

<script>
export default {
  name: 'VueZzwHrChildCom',
  props: {
    value: {
      type: String,
      // required: true,
      default: ''
    },
    aaa: {
      type: Number,
      // required: true
      default: 0
    },
    bbb: {
      type: Number,
      // required: true
      default: 0
    },
    obj: {
      type: Object,
      // required: true
      default: () => {}
    }
  },
  data() {
    return {
    }
  },
  methods: {
    fn() {
      this.$emit('input', this.value + '给爷变')
    },
    updatedNum() {
      this.$emit('update:aaa', this.aaa + 5)
      this.$emit('update:bbb', this.bbb + 10)
    },
    changeObj() {
      this.obj.name = '张三'
      this.obj.age = 25
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
